<template>
  <div class="menu-item" @click="handleClick(menu)">
    <image class="icon" :src="iconPath" mode="" />
    <span class="name">{{ menu.formName }}</span>
  </div>
</template>

<script>
import { getAccessToken } from '@/utils/storage.js'

export default {
  name: 'Usedmenuitem',
  props: {
    menu: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      recentlyUsed: [],
    }
  },
  computed: {
    iconPath() {
      const defaultIcon = 'https://oa.zeweb.org.cn/api/admin/sys-file/zeoa/4abb405851ce45ccae7951fdc8f27038.png'
      try {
        const url = JSON.parse(this.menu.logo).icon
        if (url.startsWith('/admin/sys-file')) {
          return `${this.$env.FILE_BASE_URL}${url}`
        }
        return defaultIcon
      } catch {
        return defaultIcon
      }
    },
  },
  methods: {
    handleClick(menu) {
      const _this = this
      _this.$store.state.menuData.unshift(menu)
      _this.recentlyUsed = _this.$store.state.menuData
      uni.setStorageSync('menu_recentlyUsed', _this.$store.state.menuData)
      uni.navigateTo({
        url: `/pages/webview/index?link=${encodeURIComponent(
          `${_this.$env.WEBVIEW_URL}/mbinitiate?code=${
            _this.menu.formId
          }&token=${getAccessToken()}&page='common-item'`,
        )}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.menu-item {
  width: 78px;
  height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;

  .icon {
    width: 38px;
    height: 38px;
    border-radius: 4px;
  }

  .name {
    margin-top: 6px;
    font-size: 13px;
    color: #000;
  }
}
</style>
